<template>
	<view class="p-50 p-t-30 left bg-change">
		<text class="ts-48 tb wa left m-b-20" style="margin-top: 120rpx;">
			<text class="tc-green">君能</text>e站
		</text>
		<br>
		<text class="ts-26 wa left">
			<text class="tc-gray">长途货运人的续航引擎</text>
		</text>
		<view class="form-item left" style="margin-top: 100rpx;">
			<input class="form-input" type="text" v-model="accountInfo.realname" placeholder="手机号"/>
			<view class="form-count">
				<span class="full-count">+86</span>
			</view>
		</view>
		<view class="form-item left" style="margin-top: 20rpx;">
			<input class="form-input" style="padding-left: 40rpx; width: 608rpx;" type="text" v-model="accountInfo.realname" placeholder="密码"/>
		</view>
		<view class="form-item left" style="margin-top: 20rpx;">
			<input style="padding-left: 40rpx; width: 363rpx;" class="form-input left" type="text" v-model="accountInfo.realname" placeholder="验证码"/>
			<view class="yzm">
				发送验证码
			</view>
		</view>
		<view class="form-item left ts-26" style="margin-top: 55rpx;">
			<checkbox-group style="display: inline-block;">
				<label>
					<checkbox v-model="checked" checked="true" color="#005650" style="transform:scale(0.7);"/>
				</label>
			</checkbox-group>
			<text class="tc-gray">已阅读并同意</text>
			<text class="tb m-lr-10">用户协议</text>
			<text class="tc-gray">与</text>
			<text class="tb m-lr-10">隐私政策</text>
		</view>
		<view class="form-submit left">
			登录
		</view>
		<view class="change-login">
			<image class="change-login-img" style="margin-right: 50rpx;" src="/static/logo.png"></image>
			<image class="change-login-img" src="/static/logo.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				checked: true,
				accountInfo:{
					id:0,
					realname:'',
					mobile:'',
					type:'',
					accountname:'',
					accountno:''
				},
			}
		},

		methods: {
			selectCarType(item) {
				this.active = item.name;
			},
			submit() {
				this.$xyfun.to('/pages/create');
			}
		}
	}
</script>

<style scoped lang="scss">
	.change-login {
		position: fixed;
		bottom: 150rpx;
		width: 650rpx;
		text-align: center;
		.change-login-img {
			width: 85rpx;
			height: 85rpx; 
			border-radius: 50%;
		}
	}
	
	.bg-change {
		height: 100vh;
		background-image: linear-gradient(white, rgba(0,86,80,0.53));
	}
	.yzm {
		margin: 0 0 0 21rpx;
		width: 220rpx;
		height: 101rpx;
		border-radius: 15rpx;
		background-color: rgba(255,255,255,1);
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		text-align: center;
		// color: white;
		line-height: 100rpx;
		float: left;
	}
	.form-submit {
		margin: 35rpx 0 50rpx;
		width: 649rpx;
		height: 100rpx;
		border-radius: 15rpx;
		background-color: rgba(0,86,80,1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}
	.form-item {
		width: 648rpx;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-input {
			width: 528rpx;
			height: 100rpx;
			border-radius: 15rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 120rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			// color: rgba(102,102,102,0.32);
			font-size: 24rpx;
			.full-count {
				font-size: 34rpx;
			}
		}
	}
</style>